昨天我們介紹如何建立 DOM 節點的建立，還有帶到一點用什麼發法插入節點。
今天要介紹更詳細的插入節點使用的方法，讓我們繼續看下去！

Node.appendChild(childNode)
透過這個方法，可以將我們動態產生的 DOM 節點加入到 Node 父層節點的末端：

<ul id="list">
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

let list = document.querySelector('#list') // 取得父層容器節點
let newList = document.createElement('li') // 產生 li
let textNode = document.createTextNode('Hi!') // 產生文字節點
newList.appendChild(textNode) // 將文字節點放入我們產生的 li(裡面含我們的文字節點)
list.appendChild(newList) // 將 產生的 li 放入我們的父層節點

Node.insertBefore(newList, refList)
這個方法可以將新節點插入到我們指定的節點的前方：

<ul id="list">
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

let list = document.querySelector('#list') // 取得父層容器節點
let refList = document.querySelectorAll('li')[1] // 先選到全部的 li 在用索引值選出我們要指定的
let newList = document.createElement('li') // 產生 li
let textNode = document.createTextNode('Hi!') // 產生文字節點
newList.appendChild(textNode) // 將文字節點放入我們產生的 li(裡面含我們的文字節點)
list.insertBefore(newList, refList) // 將新的 list 插入到我們指定的 list 前方

Node.replaceChild(newList, oldList)
使用這個方法可以替換掉 oldList

<ul id="list">
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

let list = document.querySelector('#list') // 取得父層容器節點
let oldList = document.querySelectorAll('li')[1] // 先選到全部的 li 在用索引值選出我們要指定的
let newList = document.createElement('li') // 產生 li
let textNode = document.createTextNode('Hi!') // 產生文字節點
newList.appendChild(textNode) // 將文字節點放入我們產生的 li(裡面含我們的文字節點)
list.insertBefore(newList, oldList) // 將新的 list 替換掉我們指定的 oldlist

Node.removeChild(childNode)
使用這個方法，將指定的 oldList 移除

<ul id="list">
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

let list = document.querySelector('#list') // 取得父層容器節點
let oldList = document.querySelectorAll('li')[1] // 先選到全部的 li 在用索引值選出我們要指定的
list.removeChild(oldList) // 移除我們指定的 oldList

希望大家都可以學會怎樣修改跟刪除 DOM 囉！ 我們明天見！